<template>
  <div class="address-item">
    <div class="text">
      <ul>
        <li><span>收<i/>货<i/>人：</span>{{addr.receiver}}</li>
        <li><span>联系方式：</span>{{addr.contact.replace(/^(\d{3})\d{4}(\d{4})/,'$1****$2')}}</li>
        <li><span>收货地址：</span>{{addr.address}}</li>
      </ul>
    </div>
    <div class="action">
      <XtxButton class="btn small primary" v-if="addr.isDefault===0">默认地址</XtxButton>
      <XtxButton class="btn small gray" @click="$emit('on-setDefault', addr)" v-else>设为默认</XtxButton>
      <p style="margin: 10px 0">
        <a @click="$emit('on-edit', addr)" href="javascript:;">编辑</a>
        <a @click="$emit('on-delete', addr)" href="javascript:;">删除</a>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddressItems',
  props: {
    addr: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['on-delete', 'on-edit', 'on-setDefault']
}
</script>

<style lang="less" scoped>
.address-item {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  margin-top: 10px;
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    > ul {
      flex: 1;
      padding: 20px;
      li {
        line-height: 30px;
        span {
          color: #999;
          margin-right: 5px;
          > i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }
    > a {
      color: @xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }
  .action {
    width: 200px;
    text-align: center;
    a:nth-child(1) {
      color: @xtxColor;
      margin-right: 10px;
    }
    a:nth-child(2) {
      color: @helpColor;
      margin-left: 10px;
    }
  }
}
</style>
